<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page isELIgnored="false"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta>
<title><c:out value="${pageTitle }">OoM-文章专辑管理</c:out></title>
	<meta name="keywords" content="个人博客,wjyuian技术站" />
	<meta name="description" content="wjyuian技术站" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="/static/css/base.css" rel="stylesheet" />
	<link href="/static/css/index.css" rel="stylesheet" />
	<link href="/static/css/m.css" rel="stylesheet" />
	<link rel="icon" href="/static/img/logo.ico" type="image/x-icon" />

<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->


<style type="text/css">
.topnav ul {
	margin: 0px;
}

span.keywordHighLight{
	color : red;
}

.navbor li ul li {
	margin-left : 0px !important;
}


.albumDiv{
    float : left;
    width : 560px;
    box-shadow : 2px 2px 10px #BCBCBC;
    background-color : white;
    margin-left : 25px;
    margin-bottom : 15px;
    margin-top : 5px;
    color : black; 
    border-radius : 3px;
}
img.albumLogo{
    width : 147px;
    height : 210px;
    border-radius : 3px;
}
div.albumTitle{
    font-size : 20px;
    font-weight : bold;
    color : black;
}

a.albumEdit{
     display : none;
     background-image : url('/static/img/edit.png');
     background-size : 20px 20px;
     padding : 10px;
}
a.albumDel{
     display : none;
     background-image : url('/static/img/album_del.png');
     background-size : 15px 15px;
     background-repeat : no-repeat;
     background-position : 1px 2px;
     padding : 10px;
     margin-right : 10px;
}
a.albumRecover{
     display : none;
     background-image : url('/static/img/album_recover.png');
     background-size : 17px 17px;
     background-repeat : no-repeat;
     background-position : 1px 0px;
     margin-right : 10px;
     padding : 10px;
}

div.albumDiv:hover a.btnIcon{
    display : block;
}

div.albumArticles{
    color : black;
}
div.albumArticles a{
    color : gray;
    text-decoration : underline;
}
div.albumArticles a:hover{
    color : black;
    text-decoration : underline;
}

</style>

	<script type="text/javascript">
	function jumpPage(n) {
		var form = $('#searchform');
		form.find('input[name="pageNo"]').val(n);
		form.submit();
	}
	</script>
</head>

<body>
	<header>
		<div class="tophead">
			<div class="logo">
				<a href="/home"><img src="/static/img/logo_nav.png" width="225" height="50" /></a>
			</div>
			<nav class="topnav" id="topnav">
				<ul>
					<li><a href="/article/index">管理文章</a></li>
					<li><a href="/article/album" id="topnav_current">管理专辑</a></li>
					<li><a href="/article/publish">发布文章</a></li>
				</ul>
			</nav>
		</div>
	</header>
    <div class="header-blank">
    </div>
	
<article>

    <div style="">

    <c:choose>
        <c:when test="${ not empty albums }">  
            <c:forEach var="album" items="${ albums }" varStatus="status" >
            <div class="albumDiv" <c:if test="${not empty album.defunct && album.defunct == 1 }">style="background-color : #eeeeee; color : gray;"</c:if> >
                <div style="padding : 10px;">
                    <div style="float : left;">
                        <img class="albumLogo" src="${album.logo }_210X300" />
                    </div>
                    <div style="float : left; padding-left : 15px; width : 370px;">
                        <div style="height : 190px;">
	                        <div class="albumTitle" style="float : left; padding-top : 8;">${album.title }</div>
	                        <div style="float : right;">
	                           <a href="albume/${album.id }" class="btnIcon albumEdit" style="float : right;"></a>
                               <c:choose>
                                  <c:when test="${not empty album.defunct && album.defunct == 1 }">
                               <a href="albume/recover/${album.id }" class="btnIcon albumRecover" style="float : right;"></a>
                                  </c:when>
                                  <c:otherwise>
	                           <a href="albume/del/${album.id }" class="btnIcon albumDel" style="float : right;"></a>
                                  </c:otherwise>
                               </c:choose>	       
	                        </div>
	                        <div style="clear : both;"></div>
	                        
	                        <div style="-webkit-box-orient: vertical; overflow : hidden; font-size : 14px;
	                        word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3;">${album.info }</div>
	                        <div style="overflow-y : auto; height : 100px; margin-top : 4px; margin-bottom : 4px; font-size : 14px;">
                                <c:forEach var="article" items="${ album.articles }" varStatus="status" >
                                <div class="albumArticles">
                                    > <a target="_blank" href="../articledetail?atclid=${article.articleId }">${article.articleTitle }</a>
                                </div>
                                </c:forEach>
	                        </div>
                        </div>
                        <div style="line-height : 22px; vertical-align: bottom; text-align : right;">${album.createTimeString }</div>
                    </div>
                    <div style="clear : both;"></div>
                </div>
            </div>
            </c:forEach>     
            <div style="clear : both;"></div>
        </c:when>
        <c:otherwise> 
            <div style="padding : 30px;"> 还没有创建任何文章专辑... </div>
        </c:otherwise>
    </c:choose>
        <div style="padding : 30px;">
            <div>
                <a target="_blank" class="a_create" href="albume/add">创建新专辑</a>
            </div>
        </div>
    </div>

</article>



</body>
</html>